<template>
    <div class="follow-main-box" v-loading="loading">
      <ul class="follow-user-main-box">
        <li class="follow-user-box" v-for="(item,index) in info" :key="index">
          <img @click="switchHomePage(item)" :src="item.followed_user.header_image" alt="" class="follow-user-img">
          <span @click="switchHomePage(item)" class="follow-user-name">{{item.followed_user.nickname}}
            <span class="iconfont icon-nan" v-if="item.followed_user.sex==='男'"></span>
            <span class="iconfont icon-nv" v-if="item.followed_user.sex==='女'"></span>
          </span>
          <span class="follow-followed-button" @click="showDialog(item)"><i class="el-icon-check"></i>已关注</span>
        </li>
      </ul>
      <NoData v-if="followCount===0" :tip="tip" />

      <div style="text-align: right">
        <el-pagination
          class="follow-pages"
          background
          layout="prev, pager, next"
          :total="followCount"
          v-if="followCount"
          @current-change="changePage"
          :page-size="10">
        </el-pagination>
      </div>

      <el-dialog
        title="取消关注"
        :visible.sync="dialog"
        width="30%"
        center>
        <span>你确定要取消关注该用户吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">确 定</el-button>
          <el-button @click="dialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import {getUserFollow,unFollow} from "../../api/operation";
import NoData from '../../components/noData'

export default {
      name: "index",
      data(){
        return{
          info:{},
          loading:false,
          dialog:false,
          deleteId:'',
          followCount:0,
          tip:'你还没有关注的用户哦',
        }
      },
      created(){
        this.loading=true;
        this.getUserFollowList()
      },
      components:{
        NoData
      },
      methods:{
        getUserFollowList(){
          let vm=this;
          getUserFollow('?ordering=-add_time&page_size=10').then(res=>{
            vm.info=res.data.results;
            console.log(res.data.results);
            vm.followCount=res.data.count;
            vm.loading=false;
          }).catch(error=>{
            vm.loading=false;
          })
        },
        showDialog(item){
          this.deleteId=item.followed_user.id;
          this.dialog=true;
        },
        cancel(){
          let vm=this;
          vm.dialog=false;
          unFollow(vm.deleteId).then(res=>{
            vm.$message.success('取消关注成功');
            vm.loading=true;
            vm.getUserFollowList();
          }).catch(error=>{
            vm.$message.error('取消关注失败');
          })
        },
        changePage(now){
          this.loading=true;
          getUserFollow('?page=' + now + '&ordering=-add_time&page_size=10').then(res=>{
            this.info=res.data.results;
            this.loading=false;
          }).catch(error=>{
            this.loading=false;
          })
        },
        switchHomePage(item){
          this.$router.push('/homePage?id=' + item.followed_user.id);
        }

      }

    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .follow-main-box{
    max-width 600px!important
    margin 0 auto
    width 100%
  }
  .follow-user-main-box{
    width 100%
    padding 0
    list-style none
  }

  //关注用户列表
  .follow-user-box{
    position relative
    height 60px
    border-bottom 1px solid $color-divider
  }
  .follow-user-img{
    width 40px
    height 40px
    border-radius 20px
    border 1px solid $color-border
    position absolute
    left 8px
    top 10px
    cursor pointer
  }
  .follow-pages{
    margin-top 20px
    margin-bottom 30px
  }
  .follow-user-name{
    position absolute
    left 58px
    top 23px
    font-size 14px
    color $color-content
    cursor pointer
  }
  .follow-followed-button{
    position absolute
    right 8px
    top 17px
    padding 5px 10px
    border-radius 6px
    border 1px solid $color-border
    font-size 14px
    color $color-gray
    cursor: pointer;
  }
  .el-icon-check{
    font-size 14px
    margin-right 3px
  }



  //没有数据的css
  .follow-no-data-box{
    text-align center
  }
  .follow-no-data-img{
    width 100%
    max-width 400px
    height auto
    margin-top 20%
  }
  .follow-no-data-text{
    display block
    margin-top 30px
    font-weight 700
    font-size 22px
    color $color-content
  }
  .icon-nan{
    color $color-blue
    font-size 14px
  }
  .icon-nv{
    color $color-pink
    font-size 14px
  }
</style>
